<template>
  <div class="container">
    <!-- 饼状图容器 -->
    <div class="pie-chart-container">
      <div class="chart-wrapper">
        <canvas ref="PieChartCanvas" :width="10" :height="10"></canvas>
        <!-- 图例 -->
        <div class="legend">
          <div class="legend-row">
            <div class="legend-item">
              <div class="color-circle unfinished-color"></div>
              <div class="legend-label">Unfinished Tasks</div>
            </div>
          </div>
          <div class="legend-row">
            <p class="legend-count">{{ unfinishedTasks }}</p>
          </div>
          <div class="legend-row" style="margin-top: 10px;">
            <div class="legend-item">
              <div class="color-circle finished-color"></div>
              <div class="legend-label">Finished Tasks</div>
            </div>
          </div>
          <div class="legend-row">
            <p class="legend-count">{{ completedTasks }}</p>
          </div>
        </div>
      </div>
      <!-- Move the title below the chart -->
      <div class="chart-title_1">Completion Rate</div>
    </div>

        <!-- 图例 -->

    <!-- 折线图容器 -->
    <div class="line-chart-container">
      <div class="chart-title">Learning Time Variation</div>
      <div class="chart-wrapper">
        <canvas ref="lineChartCanvas" :width="1200" :height="280"></canvas>
      </div>
    </div>

    <div class="summary-container">
      <div class="chart-title">Summarize</div>
      <div class="summary-item1">
        <p class="summary-label"  style="margin-bottom: 20px;">Today you've learned</p>
        <p class="summary-value">{{ `≈ ${todaysLearningTime} hours` }}</p>
      </div>
      <div class="summary-item2">
        <p class="summary-label" style="margin-bottom: 20px;">The number of tasks</p>
        <p class="summary-value">{{ `${totalTasks}` }}</p>
      </div>
      <div class="summary-item3">
        <p class="summary-label" style="margin-bottom: 20px;">Unfinished tasks</p>
        <p class="summary-value">{{ `${unfinishedTasks}` }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue';
import Chart from 'chart.js/auto';

export default {
  name: 'Statistics',
  props: {
    totalTasks: {
      type: Number,
      default: 6,
    },
    completedTasks: {
      type: Number,
      default: 2,
    },
    unfinishedTasks: {
      type: Number,
      default: 4,
    },
    weeklyStudyTime: {
      type: Array,
      default: () => [
        { day: 'Mon', time: 2 },
        { day: 'Tue', time: 1 },
        { day: 'Wed', time: 4 },
        { day: 'Thu', time: 2.5 },
        { day: 'Fri', time: 5 },
        { day: 'Sat', time: 4 },
        { day: 'Sun', time: 2 },
      ],
    },
    lastWeekStudyTime: {
      type: Array,
      default: () => [
        { day: 'Mon', time: 1 },
        { day: 'Tue', time: 2 },
        { day: 'Wed', time: 3.5 },
        { day: 'Thu', time: 1.5 },
        { day: 'Fri', time: 6 },
        { day: 'Sat', time: 2 },
        { day: 'Sun', time: 2.1 },
      ],
    },
    todaysLearningTime: {
      type: Number,
      default: 2,
    },
  },
  setup(props) {
    const PieChartCanvas = ref(null);
    const lineChartCanvas = ref(null);
    const unfinishedTasks = ref(props.unfinishedTasks);
    const completedTasks = ref(props.completedTasks);
    const weeklyStudyTime = ref([...props.weeklyStudyTime]);
    const lastWeekStudyTime = ref([...props.lastWeekStudyTime]);

    onMounted(() => {
      initPieChart();
      initLineChart();
    });

    watch(
      [unfinishedTasks, completedTasks, weeklyStudyTime, lastWeekStudyTime],
      () => {
        // Reinitialize charts when data changes
        initPieChart();
        initLineChart();
      }
    );

    function initPieChart() {
      if (PieChartCanvas.value) {
        const ctx = PieChartCanvas.value.getContext('2d');
        new Chart(ctx, {
          type: 'doughnut',
          data: {
            labels: ['Unfinished Task', 'Finished Task'],
            datasets: [
              {
                data: [unfinishedTasks.value, completedTasks.value],
                backgroundColor: [
                  'rgba(30, 144, 255, 0.8)', // 深蓝色
                  'rgba(173, 216, 230, 0.8)', // 浅蓝色
                ],
                borderWidth: 2,
                borderColor: 'white',
              },
            ],
          },
          options: {
            radius: '60%',
          },
        });
      }
    }

    function initLineChart() {
  if (lineChartCanvas.value) {
    const ctxLine = lineChartCanvas.value.getContext('2d');
    new Chart(ctxLine, {
      type: 'line',
      data: {
        labels: weeklyStudyTime.value.map((item) => item.day),
        datasets: [
          {
            label: 'This Week',
            data: weeklyStudyTime.value.map((item) => item.time),
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 2,
            fill: false,
            pointBackgroundColor: 'rgba(75, 192, 192, 1)',
          },
          {
            label: 'Last Week',
            data: lastWeekStudyTime.value.map((item) => item.time),
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 2,
            fill: false,
            pointBackgroundColor: 'rgba(255, 99, 132, 1)',
          },
        ],
      },
      options: {
        scales: {
          x: {
            type: 'category',
            labels: weeklyStudyTime.value.map((item) => item.day),
            scaleLabel: {
              display: true,
              labelString: 'Day',
          },
          ticks: {
            autoSkip: true,
            maxTicksLimit: 7, // 设置为标签的最大数目
          },
        },
          y: {
            beginAtZero: true,
            scaleLabel: {
              display: true,
              labelString: 'Study Time (hours)',
            },
          },
        },
        legend: {
          labels: {
            usePointStyle: true,
          },
        },
      },
    });
  }
}

    return {
      PieChartCanvas,
      lineChartCanvas,
    };
  },
};
</script>

<style scoped>
.container{
  display: flex;
  width: 960px;
}
.summary-container {
  position: absolute;
  top: 120px; /* 调整位置 */
  left: 290px; /* 调整位置 */
  width: 500px; /* 调整宽度 */
  height: 250px; /* 调整容器高度 */
  display: flex;
  flex-direction: row;
  margin-right: 20px; /* 调整标题和文本框的间距 */
  border: 6px solid white; /* 添加白色边框 */
  border-radius: 10px; /* 设置边框角为弧形 */
  padding: 5px; /* 增加内边距 */
  background-color: rgba(255, 255, 255, 0.8); /* 设置底色为略带透明的白色 */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}
.summary-item1 {
  position: absolute;
  top:100px;
  left: 10px;
  width: 150px;
  margin-bottom: 20px;
}

.summary-item2 {
  position: absolute;
  top:120px;
  left: 190px;
  width: 150px;
  margin-bottom: 20px;
}

.summary-item3 {
  position: absolute;
  top:120px;
  left: 360px;
  width: 150px;
  margin-bottom: 20px;
}

.summary-item4 {
  position: absolute;
  top:200px;
  left:200px;
  width: 400px;
  margin-bottom: 20px;
}
.summary-label {
  font-size: 15px; /* 设置字体大小 */
  /* 其他样式属性 */
}

/* 样式调整 ≈ 2 hours 文本 */
.summary-value {
  font-size: 25px; /* 设置字体大小 */
  font-weight: bold; /* 设置字体加粗 */
  /* 其他样式属性 */
}

.summary-event {
  font-size: 15px;
  margin-bottom: 5px;
  white-space: pre-line;
}
.pie-chart-container {
  position: absolute;
  top: 180px; /* 将饼状图移动到上方 */
  left: 800px; /* 移到右边 */
  width: 360px;
  height: 190px;
  display: flex;
  flex-direction: column;
  border: 1px solid white; /* 添加白色边框 */
  border-radius: 10px; /* 设置边框角为弧形 */
  padding: -10%; /* 增加内边距 */
  background-color: rgba(255, 255, 255, 0.8); /* 设置底色为略带透明的白色 */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

.line-chart-container {
  position: absolute;
  top: 320px; /* 将折线图移动到下方 */
  left: 290px; /* 保持在中间位置 */
  width: 900px;
  height: 240px; 
  display: flex;
  flex-direction: column;
  border: 6px solid white; /* 添加白色边框 */
  border-radius: 10px; /* 设置边框角为弧形 */
  padding: 0px; /* 增加内边距 */
  background-color: rgba(255, 255, 255, 0.8); /* 设置底色为略带透明的白色 */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

.chart-wrapper {
  display: flex;
  align-items: center;
  margin-top: 0px;
  top: auto;
  padding: -3%;
  padding-left: 0%;
  padding-bottom: 0%;
  margin-bottom: auto;
}

.pie-chart-container {
  margin-top: -2%;
  justify-content: center;
  align-items: center;
  bottom: 100px;
  padding: 10px;
  display: flex;
  width: 400px;
  height: 230px; 
  padding-bottom: -300px;

}

.legend {
  display: flex;
  flex-direction:column;
  margin-top: 0;
  width:auto;
  height: 200px;
}

.legend-row {
  display: flex;
  align-items: center;
  margin-bottom: 0; /* 增加行间距 */
}

.legend-item {
  display: flex;
  align-items: center;
  margin-right: 10px;

}

.color-circle {
  width: 25px; /* 放大图例大小 */
  height: 20px; /* 放大图例大小 */
  border-radius: 50%;
  margin-right: 5px; /* 增加图例与文字之间的距离 */
}

.unfinished-color {
  background-color: rgba(30, 144, 255, 0.8);
}

.finished-color {
  background-color: rgba(173, 216, 230, 0.8);
}

.legend-label {
  margin-right: 10px;
  margin-top: 20px;
  line-height: 15px;
}

.legend-count {
  margin-top: 10px;
  text-align: center;
  font-size: 18px; /* 调整字体大小 */
  font-weight: bold; /* 加粗字体 */
  line-height: 2px;
  position:relative;
  top:2px;
}

.chart-title {
  font-size: 20px;
  font-weight: bold;
  color:rgb(28, 83, 211);
  margin-top: 0; 
  position: relative;
  top:-1px;
  /* 添加底部间距 */
}

.chart-title_1{
  font-size: 20px;
  font-weight: bold;
  color:rgb(28, 83, 211);
  margin-top: 0; 
  position: relative;
  top:-280px;
  padding-left: -100px;
  right:50px;
}
.line-chart-container {
  margin-top: 50px; /* 调整折线图容器与饼状图之间的间距 */
  padding: 3px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

</style>